<template>
  <div>
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="试卷名称" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入试卷名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="使用类型" prop="userType">
        <el-select
          v-model="queryParams.userType"
          placeholder="请输入使用类型"
          clearable
          @keyup.enter.native="handleQuery"
        >
          <el-option
            v-for="item in options.USER_TYPE.list"
            v-bind="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="试卷类型" prop="type">
        <el-select
          v-model="queryParams.type"
          placeholder="请输入试卷类型"
          clearable
          @keyup.enter.native="handleQuery"
        >
          <el-option
            v-for="item in options.TEST_PAPER_TYPE.list"
            v-bind="item"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="及格分数" prop="passGrade">
        <el-input-number
          :min='0'
          :controls="false"
          v-model="queryParams.passGrade"
          placeholder="请输入及格分数"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="总分数" prop="totalGrade">
        <el-input-number
          :min='0'
          :controls="false"
          v-model="queryParams.totalGrade"
          placeholder="请输入总分数"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="部门" prop="deptId">
        <dept-selector
          v-model="queryParams.deptId"
          placeholder="请输入部门"
          clearable
          @keyup.enter.native="handleQuery"
        >
        </dept-selector>
      </el-form-item>
      <el-form-item label="岗位" prop="postId">
        <el-select
          v-model="queryParams.postId"
          placeholder="请输入岗位"
          clearable
          @keyup.enter.native="handleQuery"
        >
          <el-option
            v-for="item in options.postList"
            :label="item.postName"
            :value="item.postId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="岗位级别" prop="postLevelCode">
        <el-select
          v-model="queryParams.postLevelCode"
          placeholder="请输入能力级别"
          clearable
          @keyup.enter.native="handleQuery"
        >
          <el-option
            v-for="dict in dict.type.post_level"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table border v-loading="loading" :data="ExamTestPaperModuleList">
      <el-table-column resizable show-overflow-tooltip label="试卷名称" align="center" prop="name"/>
      <el-table-column resizable show-overflow-tooltip label="使用类型" align="center" prop="userType">
        <template #default="{row}">
          {{ options.USER_TYPE.map[row.userType] }}
        </template>
      </el-table-column>
      <el-table-column resizable show-overflow-tooltip label="试卷类型" align="center" prop="type">
        <template #default="{row}">
          {{ options.TEST_PAPER_TYPE.map[row.userType] }}
        </template>
      </el-table-column>
      <el-table-column resizable show-overflow-tooltip label="及格分数" align="center" prop="passGrade"/>
      <el-table-column resizable show-overflow-tooltip label="总分数" align="center" prop="totalGrade"/>
      <el-table-column resizable show-overflow-tooltip label="部门" align="center" prop="deptId">
        <template #default="{row}">
          {{ row.deptId | deptFilter }}
        </template>
      </el-table-column>
      <el-table-column resizable show-overflow-tooltip label="岗位" align="center" prop="postId">
        <template #default="{row}">
          {{ row.postId | postFilter }}
        </template>
      </el-table-column>
      <el-table-column resizable show-overflow-tooltip label="岗位级别" align="center" prop="postLevelCode">
        <template #default="{row}">
          <dict-tag :options="dict.type.post_level" :value="row.postLevelCode"/>
        </template>
      </el-table-column>
      <el-table-column resizable show-overflow-tooltip label="备注" align="center" prop="remark"/>
      <el-table-column resizable label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="startTest(scope.row)"
          >开始模拟
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import {
  addExamTestPaperModule,
  delExamTestPaperModule,
  getExamTestPaperModule,
  listExamTestPaperModule,
  updateExamTestPaperModule
} from "@/api/train/base/ExamTestPaperModule";
import mixins from "@/views/train/mixins";
import {QUESTION_TYPE, TEST_PAPER_TYPE, USER_TYPE} from "@/views/train/Enums";
import {createTrainPaper} from "@/api/train/base/Train";

export default {
  name: "testPaperModule",
  mixins: [mixins],
  data() {
    return {
      postSubjectPointTree: [],
      postSubjectPointTreeAll: [],
      // 遮罩层
      loading: true,
      // 选中数组
      // 子表选中数据
      checkedExamTestPaperExtractRule: [],
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 试卷模板表格数据
      ExamTestPaperModuleList: [],
      // 试卷试题抽取规则表格数据
      examTestPaperExtractRuleList: [],
      // 固定题目数据
      requiredExamList: [],
      // 选中的固定题目的数据
      checkedRequiredExamList: [],
      // 选取题目的表格的查询参数
      requiredExamParams: {},
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        userType: null,
        type: null,
        passGrade: undefined,
        totalGrade: undefined,
        deptId: null,
        postId: null,
        postLevelCode: null,
        isDel: null,
        delBy: null,
        delTime: null,
      },
      options: {
        deptList: [],
        postList: [],
        TEST_PAPER_TYPE,
        QUESTION_TYPE,
        USER_TYPE,
        rulePostLevel: [],
      },
    };
  },
  methods: {
    // 开始模拟
    startTest(row){
      // this.loading = true
      createTrainPaper(row.id).then(res => {
        this.loading = false
        this.$emit('close')
        this.$nextTick(_=>{
          this.$router.push(`/train/simulationDetail/${res.data.id}`)
        })
      }).finally(()=>{
      })
    },
    noop(event) {
      const target = event.target;
      if (target.matches('.el-input-number')) { // 假设 .el-input-number 是 el-input-number 的类名
        event.stopPropagation();
        event.stopImmediatePropagation();
      }
    },
    /** 查询试卷模板列表 */
    getList() {
      this.loading = true;
      listExamTestPaperModule({...this.queryParams, userType: this.options.USER_TYPE.enums.TRAIN.value}).then(response => {
        this.ExamTestPaperModuleList = response.rows;
        this.total = response.total;
      }).finally(()=>{
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    async init() {
      this.getList()
      this.postSubjectPointTreeAll = await this.getPostSubjectPointTree()
      this.options.deptList = (await this.getDepts()).list
      this.options.postList = (await this.getPosts()).list
    },
  },
  created() {
    this.init();
  },

}
</script>

<style scoped>

</style>
